<template>
	<view class="vwh df-yc">
		<!-- 导航栏 -->
		<view class="navbar w100" :style="{ background: bgcolor }">
			<cu-custom :isBack="true" :showBackIcon="true">
				<block slot="backText">
					<text class="nav-title fs32 white shopro-selector-rect">我的内测邀请码</text>
				</block>
			</cu-custom>
		</view>
		<!-- 内容 -->
		<view class="content w100 px30">
			<scroll-view scroll-y="true">
				<view class="top bs px30 mt30 df-xb ai">
					<view class="left df-y">
						<text style="color: #624121;" class="shsc fb fs36">加入成事节点赛</text>
						<text style="color: rgba(98, 65, 33, 0.7);" class="fs24 mt20">一起瓜分百万大奖</text>
					</view>
					<view style="color: #FFE3C9;" class="button shsc df-c fb">立即加入</view>
				</view>
				<view class="list">
					<view style="color: #333333;margin-top: 60rpx;" class="title shsc fb fs32">我的内测邀请码</view>
					<view style="margin-top: 40rpx;" class="item bs px30 df-xb ai" v-for="item in inviteList" :key="item.code" v-if="item.scan_id">
						<view style="color: #BE915C;" class="code">{{item.code}}</view>
						<view class="right df ai">
							<view style="width: 90rpx;height: 90rpx;" class="head-img mr20">
								<image style="width:90rpx ;" :src="item.avatar" mode="widthFix"></image>
							</view>
							<view class="name fs28 one-t">{{item.nickname}}</view>
						</view>
					</view>
					<view style="margin-top: 40rpx;" class="item bs px30 df-xb ai" v-for="item in inviteList" :key="item.code" v-if="!item.scan_id">
						<view style="color: #BE915C;" class="code">{{item.code}}</view>
						<view class="right df ai">
							<view @click="setCode(item.code)" class="head-img mr20">
								<image style="width:90rpx ;" src="../../../static/imgs/images/yqpy.png" mode="widthFix">
								</image>
							</view>
							<view style="color: #999999;" class="invite">邀请朋友</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<shopro-share v-model="showShare" posterType="alpha" :inviteCode="inviteCode" :goodsInfo='goodsInfo'></shopro-share>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				temImgUrl: this.$IMG_URL_TEMP,
				showShare: false,
				inviteList:[],
				inviteCode:"",
				goodsInfo: {
					name: "byy"
				}
			};
		},
		created(){
			this.getCode()
		},
		methods: {
			setCode(code){
				this.inviteCode=code
				this.showShare=true
			},
			getCode() {
				this.$api('scan.betacode').then(res=>{
					console.log(res)
					this.inviteList=res.data
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.nav-title {
		color: #191919;
	}
	.head-img{
		border-radius: 50%;
		overflow: hidden;
	}
	.content {
		height: 100%;
		overflow: hidden;
	}

	scroll-view {
		height: 100%;
	}

	.top {
		width: 690rpx;
		height: 173rpx;
		background: linear-gradient(270deg, #FFDDBE, #FFE9D5);
		border-radius: 20rpx;

		.button {
			width: 193rpx;
			height: 70rpx;
			background: #622129;
			border-radius: 35rpx;
		}
	}

	.item {
		width: 690rpx;
		height: 153rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	.list {
		padding-bottom: 60rpx;

		.right {
			width: 300rpx;
		}
	}
</style>
